<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from '@/mixins/resize'

import china from './json/china.json'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'change-trend'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$el)
      this.$echarts.registerMap('china', china)
      const color = {
        text: 'white', //文字颜色
        rangeColor: ['#24CFF4', '#00A5C8', '#007C9E', '#005676', '#003251'], //范围颜色
        areaColor: '#31EBCE' //选中区域颜色
      }
      const data = [
        {
          name: '北京',
          value: 217.7
        },
        {
          name: '天津',
          value: 155.6
        },
        {
          name: '上海',
          value: 323.78
        },
        {
          name: '重庆',
          value: 304.43
        },
        {
          name: '河北',
          value: 156.3
        },
        {
          name: '河南',
          value: 105
        },
        {
          name: '云南',
          value: 280.5
        },
        {
          name: '辽宁',
          value: 159.3
        },
        {
          name: '黑龙江',
          value: 288.7
        },
        {
          name: '湖南',
          value: 260.2
        },
        {
          name: '安徽',
          value: 323.6
        },
        {
          name: '山东',
          value: 247.24
        },
        {
          name: '新疆',
          value: 344.67
        },
        {
          name: '江苏',
          value: 229.3
        },
        {
          name: '浙江',
          value: 237
        },
        {
          name: '江西',
          value: 222.1
        },
        {
          name: '湖北',
          value: 317
        },
        {
          name: '广西',
          value: 132
        },
        {
          name: '甘肃',
          value: 325.71
        },
        {
          name: '山西',
          value: 82.35
        },
        {
          name: '内蒙古',
          value: 34
        },
        {
          name: '陕西',
          value: 35.44
        },
        {
          name: '吉林',
          value: 125.71
        },
        {
          name: '福建',
          value: 89
        },
        {
          name: '贵州',
          value: 200
        },
        {
          name: '广东',
          value: 246
        },
        {
          name: '青海',
          value: 298.38
        },
        {
          name: '西藏',
          value: 237.15
        },
        {
          name: '四川',
          value: 341
        },
        {
          name: '宁夏',
          value: 381.79
        },
        {
          name: '海南',
          value: 225.76
        },
        {
          name: '台湾',
          value: 69
        },
        {
          name: '香港',
          value: 48.25
        },
        {
          name: '澳门',
          value: 63.2
        }
      ]

      this.chart.setOption({
        title: {
          text: '2021年中国各地重大自然灾害受灾人次',
          left: 'center',
          top: 20,
          textStyle: {
            color: 'white'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['2020年中国各地区重大自然灾害发生次数']
        },
        visualMap: {
          type: 'piecewise',
          textStyle: {
            color: color.text
          },
          pieces: [
            {
              min: 300,
              max: 400,
              label: '受灾人次300万-400万',
              color: color.rangeColor[4]
            },
            {
              min: 200,
              max: 300,
              label: '受灾人次200万-300万',
              color: color.rangeColor[3]
            },
            {
              min: 100,
              max: 200,
              label: '受灾人次100万-200万',
              color: color.rangeColor[2]
            },
            {
              min: 50,
              max: 100,
              label: '受灾人次50万-100万',
              color: color.rangeColor[1]
            },
            {
              min: 0,
              max: 50,
              label: '受灾人次50万以下',
              color: color.rangeColor[0]
            }
          ],
          color: ['#E0022B', '#E09107', '#A3E00B']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          bottom: '2%',
          feature: {
            mark: {
              show: true
            },
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        roamController: {
          show: true,
          left: 'right'
        },

        geo: {
          //地理坐标系组件用于地图的绘制
          map: 'china',
          roam: false, //不开启缩放和平移
          label: {
            normal: {
              show: true,
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)'
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: color.areaColor, //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [
          {
            name: '受灾人次',
            type: 'map', //图表类型
            geoIndex: 0,
            data: data //图表的数据
          }
        ]
      })
    }
  }
}
</script>
